import { Component, OnInit, Input } from '@angular/core';
import { CCSLSet } from '../entity/CCSLSet';
import { FileService} from '../service/file.service';
import { SafenlService } from '../service/safenl.service';
// import * as Hammer from "hammerjs";

// const svgPanZoom = require("svg-pan-zoom");
@Component({
  selector: 'app-mainbar',
  templateUrl: './mainbar.component.html',
  styleUrls: ['./mainbar.component.css']
})
export class MainbarComponent implements OnInit {

  constructor(
    private fileService : FileService,
    private safenlService: SafenlService,
    ) {
      this.fileService.SafeNLEmmited$.subscribe(SafeNLName => {
        this.SafeNLName = SafeNLName;
        console.log(this.SafeNLName)
      });
      this.safenlService.ccslEmmited$.subscribe(ccslsetList => {
        this.ccslsetList = ccslsetList;
        console.log(ccslsetList.length)
        console.log(ccslsetList)
        // document.getElementById("SafeNL").style.zIndex = "-1"; //显示编辑框
      });
      this.safenlService.CGEmmited$.subscribe(CGs => {
        this.CGs = []
        if(CGs.length != 0){
          this.CGs = CGs;
        }
      })
      this.safenlService.CCGEmmited$.subscribe(CCGs => {
        this.CCGs = []
        if(CCGs.length != 0){
          this.CCGs = CCGs;
        }
      })
      this.safenlService.RCGEmmited$.subscribe(RCGs => {
        this.RCGs = []
        if(RCGs.length != 0){
          this.RCGs = RCGs;
        }
      })
      this.safenlService.CircleEmmited$.subscribe(Circles => {
        this.Circles = []
        if(Circles.length != 0){
          this.Circles = Circles;
        }
      })
      this.safenlService.RECCGEmmited$.subscribe(RECCGs => {
        if(RECCGs.length != 0){
          this.RECCGs = RECCGs;
        }
      })
      // this.safenlService.ConsistentEmmited$.subscribe(Consistents => {
      //   if(Consistents){
      //     document.getElementById("main").style.height = "70%";
      //   }
      // })
    }

  ngOnInit() {
  }
  
  @Input() SafeNLName: string;

  ccslsetList: CCSLSet[];
  tab: string;
  CGs: string[];
  CCGs: string[];
  RCGs: string[];
  Circles: string[];
  RECCGs: string[];

  changePng(title: string){
    this.change("title: " + title);
    var time = (new Date()).getTime();
    var userName = ''
    if(document.cookie != ''){
    console.log(document.cookie)
    userName = jQuery.parseJSON(document.cookie)['username']
    }
    var url=`http://47.52.116.116:8075/ccsl/display?userName=${userName}&projectName=${this.safenlService.projectName}&version=${this.fileService.version}&fileName=${title}&time=${time}`;
    console.log(url);
    var ID = "#" + title + "-Pag"
    console.log(ID);
    console.log(document.getElementById(ID));
    $(ID).attr("src",url);   
  }

  change(title: string){
    this.tab = title;
    let tabList: string[];
    console.log(title);
    /*for(var i = 0; i < this.ccslsetList.length; i++) {
      var ccslset  = this.ccslsetList[i].ccslList;
      for(let j = 0; j < ccslset.length; j++) {
        var ccslList = ccslset[j];
        console.log(ccslList);
      }
    }*/
    let parTab = document.getElementById(title).parentElement.parentElement;
    var tabs = parTab.children;
    
    for(var i = 0; i <= tabs.length; i ++){
      if(tabs[i] != undefined){
        var ctabs = tabs[i].children;
        for(var j = 0; j < ctabs.length; j ++){
          console.log(ctabs[j]);
          var id = ctabs[j].getAttribute('id');
          if(id != title){
            if(id == "SafeNL"){
              document.getElementById(id + "-P").style.zIndex = "-1";
            }else{
              console.log(id);
              document.getElementById(id + "-P").style.display = 'none';
            }
          }else{
            if(title == "SafeNL"){
              document.getElementById(id + "-P").style.zIndex = "1";
            }else{
              document.getElementById(id + "-P").style.display = 'block';
            }
          }
        }
      }
    }    		
  }

  DropDown(tab: string){
    // console.log(tab);
    var element : any = document.getElementById(tab);
    // console.log(element);
		element.open = false;
  }

  resizeimg(ID: string,event) {  
    console.log(ID);
    var img = document.getElementById(ID + "-Pag")
    console.log(img);
    var zoom=parseInt(img.style.zoom, 10)||100;
      zoom+=event.wheelDelta/12;
      if (zoom>0) img.style.zoom=zoom+'%';
      return false;
  }  

  // initZoomPan(obj) {
  //   const eventsHandler = {
  //     haltEventListeners: [
  //       "touchstart",
  //       "touchend",
  //       "touchmove",
  //       "touchleave",
  //       "touchcancel"
  //     ],
  //     init: function(options) {
  //       var instance = options.instance,
  //         initialScale = 1,
  //         pannedX = 0,
  //         pannedY = 0;
  //       // Init Hammer
  //       // Listen only for pointer and touch events
  //       // this.hammer = Hammer(options.svgElement, {
  //       //   inputClass: Hammer.SUPPORT_POINTER_EVENTS
  //       //     ? Hammer.PointerEventInput
  //       //     : Hammer.TouchInput
  //       // });
  //       // Enable pinch 缩放
  //       this.hammer.get("pinch").set({ enable: true });
  //       this.hammer.get("pan").set({ enable: false });
  //       this.hammer.get("doubletap").set({ enable: false });
  //       // Handle double tap
  //       // this.hammer.on('doubletap', function(ev){
  //       //   console.log(ev)
  //       // })

  //       // Handle pan
  //       this.hammer.on("panstart panmove", function(ev) {
  //         // On pan start reset panned variables
  //         if (ev.type === "panstart") {
  //           pannedX = 0;
  //           pannedY = 0;
  //         }
  //         // Pan only the difference
  //         instance.panBy({ x: ev.deltaX - pannedX, y: ev.deltaY - pannedY });
  //         pannedX = ev.deltaX;
  //         pannedY = ev.deltaY;
  //       });
  //       // Handle pinch
  //       this.hammer.on("pinchstart pinchmove", function(ev) {
  //         // On pinch start remember initial zoom
  //         if (ev.type === "pinchstart") {
  //           initialScale = instance.getZoom();
  //           instance.zoom(initialScale * ev.scale);
  //         }
  //         instance.zoom(initialScale * ev.scale);
  //       });
  //       // Prevent moving the page on some devices when panning over SVG
  //       options.svgElement.addEventListener("touchmove", function(e) {
  //         e.preventDefault();
  //       });
  //     },
  //     destroy: function() {
  //       this.hammer.destroy();
  //     }
  //   };
  //   const spz = svgPanZoom(obj, {
  //     controlIconsEnabled: true,
  //     panEnabled: false,
  //     dblClickZoomEnabled: false,
  //     // fit: true,
  //     // center: true,
  //     customEventsHandler: eventsHandler
  //   });
  //   // alert(spz)
  //   console.log(spz);
  //   return spz;
  // }
}